<template>
  <div>
    <div class="g-cur">
      <div class="wp">
        <NuxtLink to="/" class="a">创作中心</NuxtLink><span> / </span><NuxtLink to="/" class="a">资产收益</NuxtLink><span> / </span><span class="s">提现记录</span>
      </div>
    </div>
    <div class="wp">
      <div class="m-withdrawall">
        <div class="record">
          <div class="ll">提现记录</div>
          <div class="m-selectl">
            <a-select
              ref="select"
              v-model:value="TimeType"
              style="width: 200px"
              @change="setTimeout()"
            >
              <a-select-option value="7">近7天</a-select-option>
              <a-select-option value="15">近半个月</a-select-option>
              <a-select-option value="30">近一个月</a-select-option>
              <a-select-option value="90">近三个月</a-select-option>
            </a-select>
          </div>
        </div>
        <div class="m-tablel">
          <a-table :dataSource="data.dataSource" :columns="data.columns" :pagination="false" :scroll="{ x: 750 }">
            <template #bodyCell="{ column , record }">
              <template v-if="column.key === 'state'">
                <div class="green" v-if="record.state == 0">提现成功</div>
                <div class="orange" v-if="record.state == 1">待审核</div>
                <div class="red" v-if="record.state == 2">
                  审核未通过
                    <a-tooltip>
                      <template #title>{{record.tips}}</template>
                      <i class="icon"></i>
                    </a-tooltip>
                </div>
              </template>
            </template>
          </a-table>
        </div>
        <div class="m-pages">
          <a-pagination v-model:current="current1" show-quick-jumper :total="total" @change="onChange" />
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>

import { reactive, ref, onMounted } from 'vue';
import request from '~/services/request'
import { message } from 'ant-design-vue';
import {RouterLink, RouterView, useRouter} from 'vue-router'
const router = useRouter()
const current1 = ref(1);
const total = ref(0);
const TimeType = ref('7');
const data = reactive({
  dataSource: [
  ],

  columns: [
    {
      title: '排序',
      dataIndex: 'sort',
      key: 'sort',
    },
    {
      title: '时间',
      dataIndex: 'time',
      key: 'time',
    },
    {
      title: '提现金额（USD）',
      dataIndex: 'sum',
      key: 'sum',
    },
    {
      title:'提现账户',
      dataIndex: 'account',
      key: 'account',
    },
    {
      title:'状态',
      dataIndex: 'state',
      key: 'state',
    }
  ],
});
function timeFormat(time, type) {
  if(time){
    time=new Date(time)
  }
	// 获取当前日期
	const now = new Date();
	// 近七天
	const last7Days = new Date(now.getTime() - (7 * 24 * 60 * 60 * 1000));

	// 近半个月
	const last15Days = new Date(now.getTime() - (15 * 24 * 60 * 60 * 1000));

	// 近一个月
	const last30Days = new Date(now.getTime() - (30 * 24 * 60 * 60 * 1000));

	// 近三个月
	const last90Days = new Date(now.getTime() - (90 * 24 * 60 * 60 * 1000));

	// 使用Intl.DateTimeFormat格式化日期
	const dateFormatter = new Intl.DateTimeFormat('en-ca', {
		year: 'numeric',
		month: '2-digit',
		day: '2-digit',
		dataStyle: 'short',
	});
	const dateFormatterLong = new Intl.DateTimeFormat('zh-CN', {
		year: 'numeric',
		month: '2-digit',
		day: '2-digit',
		dataStyle: 'short',
		hour: '2-digit',
		minute: '2-digit',
		second: '2-digit',
	});

	// 格式化日期
	const formattedLast7Days = dateFormatterLong.format(last7Days).replace(/\//g, '-');
	const formattedLast15Days = dateFormatterLong.format(last15Days).replace(/\//g, '-');
	const formattedLast30Days = dateFormatterLong.format(last30Days).replace(/\//g, '-');
	const formattedLast90Days = dateFormatterLong.format(last90Days).replace(/\//g, '-');
	if (type == 0) {
		return dateFormatterLong.format(time).replace(/\//g, '-')
	} else if (type == 1) {
		return dateFormatterLong.format().replace(/\//g, '-')
	} else if (type == 7) {
		return formattedLast7Days
	} else if (type == 15) {
		return formattedLast15Days
	} else if (type == 30) {
		return formattedLast30Days
	} else if (type == 90) {
		return formattedLast90Days
	}
}
const formState = reactive({
	skip: (current1.value - 1) * 10,
	take: 10,
	sort: 'updatedAt_desc',
  endTime:timeFormat('',1),
  startTime:timeFormat('',TimeType.value),
});
const onChange = (page) => {
  current1.value = page
  formState.skip = (current1.value - 1) * 10
  getList()
};
function setTimeout(){
  formState.startTime=timeFormat('',TimeType.value)
  getList()
}
function getList(){
  request.get_withdraw(formState).then((res)=>{
    data.dataSource=res.results.map(item=>{
			return {
		time: timeFormat(item.updatedAt,0),
      key: '12',
      sort: '12',
      sum: '1000',
      account:'BTC钱包',
      state:'2',
      tips:'审核未通过提示提示提示提示',
			}
		})
    total.value=res.total
  })
};
onMounted(()=>{
 getList()
})

</script>

<style>
</style>
